<template>
<div>
  <el-tag type="success">主机信息</el-tag>
  <el-divider></el-divider>
  <el-table
    :data="userData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="name"
      label="联系人"
      width="180">
    </el-table-column>
    <el-table-column
      prop="tel"
      label="联系人电话"
      width="180">
    </el-table-column>
    <el-table-column>
      <template slot-scope="props">
      <el-popover
        placement="right"
        width="400"
        trigger="click">
        <el-table :data="moreConData" :visible.sync="moreConVisible">
          <el-table-column width="150" property="name" label="联系人"></el-table-column>
          <el-table-column width="100" property="tel" label="联系人电话"></el-table-column>
        </el-table>
        <el-button slot="reference">更多</el-button>
      </el-popover>
      </template>
    </el-table-column>
        <el-table-column
      prop="instPer"
      label="安装人员">
    </el-table-column>
       <el-table-column
      prop="instPerTel"
      label="安装人员联系方式">
    </el-table-column>
  </el-table>
    <el-divider></el-divider>
      <el-table
    :data="polData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="unitName"
      label="出警单位">
    </el-table-column>
       <el-table-column
      prop="unitTel"
      label="出警电话">
    </el-table-column>
       <el-table-column
      prop="unitAddr"
      label="出警路线">
    </el-table-column>
           <el-table-column
      prop="unitRemark"
      label="备注">
    </el-table-column>
    <el-table-column>
           <el-button size="mini" type="primary" @click="getDetailPos">详细位置</el-button>
    </el-table-column>
     </el-table>
  </div>
</template>

<script>
import elPopover from 'element-ui/packages/popover/index.js'
  export default {
    data() {
      return {
        conInfoMore:[{
          conName: '张三',
          conTel: '13888888888',
        },
        {
          conName: '李四',
          conTel: '13888888888',
        },
        {
          conName: '王五',
          conTel: '13888888888',
        },
        {
          conName: '赵六',
          conTel: '13888888888',
        },
        {
          conName: '赵QI',
          conTel: '13888888888',
        }
        ],
        moreConVisible: false,
        // 联系人详细信息的对话框: false,
        setContactDialogVisible: false,
        userData: [{
         name: '张三',
          tel: '13888888888',
          instPer: '李四',
          instPerTel: '13888888888',
        }],
        polData: [{
          unitName:"城南市公安局",
          unitTel: '13888888888',
          unitAddr: '城南市-城北',
          unitRemark: '读书第三道上看到阿什杜',
        }],
          gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        moreConData:[{
          name:'张三',
          tel:'13888888888',
        },
        {
          name:'李四',
          tel:'13888888888',
        },
        {
          name:'王五',
          tel:'13888888888',
        },
        {
          name:'赵六',
          tel:'13888888888',
        },
        {
          name:'赵QI',
          tel:'13888888888',
        }
        ],
      }
    },
    methods:{
      getDetailPos(){     
        this.$router.push({path:'/equmap/1'})
      },
      getMoreCon(){
        this.setContactDialogVisible = true;
      },
      setContactDialogClosed(){
        this.setContactDialogVisible = false;
      }
    },
    components: {
      elPopover
    }
  }
</script>